<template>
  <div class="section content theme flex_col">

    <div class="center flex_row flex_between" style="padding:8px;margin-top:20px">
      <Input v-model="title" placeholder="标题" style="width: 300px" clearable/>
    </div>
    <div class="center flex_row flex_between" style="padding:8px;min-height:600px;">
      <mavon-editor v-model="value" @change="changeData" @save="onsave" />
    </div>
    <div class="center flex_row btn" style="padding:8px;">
      <Select v-model="model1" style="width:200px;margin-right:20px" placeholder="请选择分类" clearable>
        <Option v-for="item in art_class" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select
        clearable
        v-model="model10"
        multiple
        style="width:540px;margin-right:20px"
        placeholder="请选择标签"
      >
        <Option v-for="item in art_tag" :value="item.name" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Button type="primary" style="margin-left:auto;width:200px;">
        <span style="color:#fff;" @click="saveArticle">保存</span>
      </Button>
    </div>
  </div>
</template>

<script>
import { mixin } from "@/utils/mixin";
export default {
  mixins: [mixin],
  components: {},
  data() {
    return {
      model1: "",
      model10: "",
      value: ``,
      defaultData: "preview",
      render_value: ``,
      title:''
    };
  },
  methods: {
    changeData(e, r) {
      console.log(r);
      this.render_value = r;
    },
    onsave(e, r) {
      this.render_value = r;
    },
    async saveArticle(){
      //保存并加入数据库
      const data = {
        name:this.title,
        content:this.render_value,
        class_id:this.model1,
        tags:this.model10.join(',')
      }

      if(!this.title) return



      const res = await this.$api.artApi.artAdd(data)
      console.log(res)
    }
  }
};
</script>

<style lang="less" scoped>
.sort {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.markdown-body {
  width: 100%;
}

.v-note-wrapper {
  z-index: 10;
}

.btn {
  margin-top: 10px;
}
</style>